<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>
    <link href="css/index/index.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/loginOut.css">
    <script src="lib/js/jquery-1.12.4.js"></script>
    <script src="js/loginText.js"></script>
</head>

<body>
    <!-- left 侧边栏 start -->
    <header>
        <div class="header_content">
            您好，<span class="actor"></span>！
            <div class="loginOut">
                退出
                <span class="iconfont icon-tuichu"></span>
            </div>
        </div>
    </header>
    <div class="content">
        <div id="left">
            <div class="menu">菜单栏</div>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <!-- todo -->


            </div>

        </div>
        <!-- left 侧边栏 end -->

        <div class="right">
            <div class="header">用户管理页面</div>
            <div class="right_content">


                <!-- 查询 -->
                <form class="form-inline" style="margin-bottom: 50px" id="myForm">
                    <div class="form-group">
                        <select name="actorId" id="searchSelect" class="form-control mySelect" required="required">
                            <!-- todo -->
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary searchButton">查询</button>
                </form>


                <table class="table table-bordered">
                    <thead>
                        <tr class="info">
                            <td>#</td>
                            <td>用户名称</td>
                            <td>用户姓名</td>
                            <td>用户类别</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- todo -->
                    </tbody>
                </table>

                <div class="page">
                    <button type="button" class="btn btn-primary"><a href="addUser.html"
                            style="color: #fff; text-decoration: none;">添加用户信息</a></button>
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <footer>
    </footer>
    <div class="footer_content1">权限管理系统2020</div>


</body>
<!-- 左 -->
<script type="text/template" id="categoryData">

    <%for(var i = 0; i < data.length; i++) {%>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <div class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                    href="#<%=i+1%>" aria-expanded="false" aria-controls="<%=i+1%>">
                    <span><%=data[i].father%></span>
                </div>
            </h4>
        </div>
        <div id="<%=i+1%>" class="panel-collapse collapse" role="tabpanel"
            aria-labelledby="headingTwo">
            <div class="panel-body" style="color: #337AB7">
                <%for(var j = 0; j < data[i].sun.length; j++) {%>
                    <div style="margin-top: 20px"><a href="<%=data[i].sun[j].url%>"><%=data[i].sun[j].name%></a></div>
                <%}%>
            </div>
        </div>
    </div>
<% } %>

</script>


<!-- 表格渲染 -->
<script type="text/template" id="tableData">
    <% for(let i = 0; i < res.data.length; i++) { %>
    <tr class="info" >
        <td><%=i+1 %></td>
        <td><%=res.data[i].nickName%></td>
        <td><%=res.data[i].name%></td>
        <td><%=res.data[i].actor%></td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-success"><a href="editUser.html?nickName=<%=res.data[i].nickName%>&name=<%=res.data[i].name%>"  style="color: #fff">编辑</a></button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-danger" data-nickName="<%=res.data[i].nickName%>">删除</button></td>
    </tr>
    <% } %>
</script>

<!-- 下拉选择框渲染 -->
<script type="text/template" id="mySelectData">
    <% for(let i = 0; i < data.length; i++) { %>
    <option value="<%=data[i]%>"><%=data[i]%></option>
    <% } %>
</script>

<script>
    window.onload = function () {
         // 角色渲染
         getAllActors(function (res) {
            $('.mySelect').html(template('mySelectData', {
                data: res
            }))
        })

         // 获取当前用户信息
         var actor = JSON.parse(localStorage.getItem('userMessage')).actor
        console.log(actor)

        // 左边菜单栏渲染
        getActorCategory(function(res) {
            console.log(res)
            $('.panel-group').html(template('categoryData', {
                    data: res
                }))
        }, actor)



        // 显示所有用户并分页
        window.page = 1
        var render = function () {
            getUsers(function (data) {
                console.log(1)
                console.log(data)

                if (data.error) {
                    window.alert(data.error)
                    return
                }

                $('tbody').html(template('tableData', {
                    res: data
                }))
                //分页插件的使用
                $('.pagination').bootstrapPaginator({
                    bootstrapMajorVersion: 3,
                    size: 'small',
                    currentPage: data.page,
                    numberOfPages: 3,
                    totalPages: Math.ceil(data.total / 5),
                    onPageClicked: function (event, originalEvent, type, page) {
                        window.page = page
                        render()
                    }
                })
            })
        }
        render()


        // 删除按钮绑定事件：
        // 得用委托呀。。。。。。。。。。。。。。。。。。。。。。。。
        $('tbody').on('click', '.btn-danger', function (e) {
            if (confirm("确认删除？")) {
                var nickName = this.getAttribute("data-nickName")
                console.log(this.getAttribute("data-nickName"))
                $.ajax({
                    url: '/pages/user/delete',
                    type: 'post',
                    data: JSON.stringify({
                        nickName
                    }),
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    success:  () => {
                        // self.location = 'user.html'
                        $(this).parent().parent().remove()
                    }
                })
            } else {
                return
            }

        })
        // 角色渲染
        // getAllActors(function (res) {
        //     console.log(res)
        //     console.log(1)
        //     $('.mySelect').html(template('mySelectData', {
        //         data: res
        //     }))
        // })


       

        // 模糊查询提交事件
        $("#myForm").submit(function (e) {
            e.preventDefault()
            var actor = $('#searchSelect')[0].value
            console.log(actor)
            $.ajax({
                url: '/pages/query',
                type: 'post',
                data: JSON.stringify({
                    actor,
                    pageNum: window.page || 1,
                    max: 5
                }),
                contentType: 'application/json;charset=UTF-8',
                dataType: 'json',
                success: function (res) {
                    console.log(res)
                    if (res.error) {
                        window.alert(res.error)
                    } else {
                        $('tbody').html(template('tableData', {
                            res: res
                        }))
                        //分页插件的使用
                        $('.pagination').bootstrapPaginator({
                            bootstrapMajorVersion: 3,
                            size: 'small',
                            currentPage: res.page,
                            numberOfPages: 3,
                            totalPages: Math.ceil(res.total / 5),
                            onPageClicked: function (event, originalEvent, type, page) {
                                window.page = page
                                render()
                            }
                        })
                    }
                }
            })


        })


        


    }


    // 获取所有用户函数封装
    function getUsers(callback) {
        $.ajax({
            url: '/pages/queryAll',
            type: 'post',
            data: JSON.stringify({
                pageNum: window.page || 1,
                max: 5
            }),
            contentType: 'application/json;charset=UTF-8',
            dataType: 'json',
            success: function (res) {
                callback && callback(res)
            }
        })
    }

    // 请求后台所有角色函数封装
    function getAllActors(callback) {
        $.ajax({
            url: '/pages/getActors',
            type: 'get',
            data: '',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }
        })
    }
    // 模糊查询函数封装
    function moHuQuery(callback) {
        $.ajax({
            url: '/pages/query',
            type: 'post',
            data: JSON.stringify({
                nickName,
                actor,
                pageNum: window.page || 3,
                max: 5
            }),
            contentType: 'application/json;charset=UTF-8',
            dataType: 'json',
            success: function (res) {
                callback && callback(res)
            }
        })
    }
   
    // 根据角色获取左边菜单栏函数封装
    function getActorCategory(callback, actor) {
        $.ajax({
            url: '/pages/category/getAllCategoryAndSunCategoryByActor',
            type: 'post',
            data: JSON.stringify({
                actor
            }),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (res) {
                callback && callback(res)
            }

        })
    }
</script>
<script src="lib/js/bootstrap.js"></script>
<script src="lib/js/bootstrap-paginator.js"></script>
<script src="lib/js/template-native.js"></script>
<script src="js/common.js"></script>
<script src="js/user.js"></script>



<script src="lib/js/mock.js"></script>
<script src="mock/moHuSearch.js"></script>
<script src="mock/user.js"></script>
<script src="mock/deleteUser.js"></script>
<script src="mock/getAllActors.js"></script>
<script src="mock/getCategoryByActor.js"></script>


</html>